<template>
  <div class="main">
    <div class="main_left">
      <div class="main_setting">基本设置</div>

      <div class="first">
        <div class="name">昵称</div>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>

      <div class="second">
        <div class="password">密码</div>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>

      <div class="third">
        <div class="sex">性别</div>
        <el-radio v-model="radio" label="1">男</el-radio>
        <el-radio v-model="radio" label="2">女</el-radio>
        <el-radio v-model="radio" label="3">未知</el-radio>
      </div>

      <div class="four">
        <div class="birthday">出生年月</div>

        <el-date-picker
          style="margin-top: 12px"
          v-model="value1"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>

      <div class="five">
        <div class="email">邮箱</div>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>

      <div class="six">
        <div class="introduce">简介</div>
        <el-input
          type="textarea"
          :rows="8"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>

      <el-row><el-button type="primary">更新基本信息</el-button></el-row>
    </div>
    <div class="main_right">
      <img :src="setting.cover_show" alt="" />
      <el-button type="primary">点击上传</el-button>
      <div class="text">只能上传jpg/png图片</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      radio: "",
      value1: "",
      textarea: "",
      setting: {
        cover_show: require("../../assets/img/nim.png"),
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.main {
  width: 800px;

  .main_left {
    width: 500px;
    height: 800px;
    float: left;
    // background: pink;
    .main_setting {
      width: 100%;
      height: 90px;
      // background: pink;
      line-height: 100px;
      font-size: 20px;
      padding-left: 50px;
    }
    .first {
      width: 300px;
      margin-left: 50px;
      // background: pink;
      .name {
        font-size: 15px;
        color: #777;
      }
      .el-input {
        margin-top: 12px;
      }
    }
    .second {
      width: 300px;
      margin-left: 50px;
      margin-top: 20px;
      // background: pink;
      .password {
        font-size: 15px;
        color: #777;
      }
      .el-input {
        margin-top: 12px;
      }
    }
    .third {
      width: 300px;
      margin-left: 50px;
      margin-top: 20px;
      // background: pink;
      .sex {
        font-size: 15px;
        color: #777;
      }
      .el-radio {
        margin-top: 12px;
        padding-right: 10px;
      }
    }
    .four {
      width: 300px;
      margin-left: 50px;
      margin-top: 20px;
      // background: pink;
      .birthday {
        font-size: 15px;
        color: #777;
      }
    }
    .five {
      width: 300px;
      margin-top: 20px;

      margin-left: 50px;
      // background: pink;
      .email {
        font-size: 15px;
        color: #777;
      }
      .el-input {
        margin-top: 12px;
      }
    }
    .six {
      width: 300px;
      margin-left: 50px;
      margin-top: 20px;

      // background: pink;
      .introduce {
        font-size: 15px;
        color: #777;
      }
      .el-input {
        margin-top: 12px;
      }
    }
    .el-row {
      margin-top: 20px;
      margin-left: 50px;
    }
  }
  .main_right {
    width: 300px;
    height: 800px;
    float: left;
    // background: red;
    img {
      width: 120px;
      height: 130px;
      margin-top: 70px;
      margin-left: 85px;
    }
    .el-button {
      margin-top: 20px;
      margin-left: 87px;
      padding-left: 30px;
      padding-right: 30px;
    }
    .text {
      font-size: 10px;
      margin-top: 15px;
      margin-left: 87px;
    }
  }
}
</style>